<template>
<div>
              <ProTable
                :data="tableData"
                :column="column"
                :elProps="elProps"
                :page="[]"
                :rowControl="[]"
                :disabled="[]"
                :controlWidth="controlWidth"
              >
                                      <template #default="{ row, propname ,index}">
                      <div v-if="propname === 'pay_money'">
                        <el-input v-model="row[propname]" :min="1" type="number" @change="handlerInput({key:'pay_money',val:row[propname],index:index})"></el-input>
                      </div>
                      <div v-if="propname === 'num'">
                        <el-input-number v-model="row[propname]" :min="1" @change="handlerInput({key:'num',val:row[propname],index:index})"></el-input-number>
                      </div>
                      <div v-if="propname === 'price'">
                        <el-input v-model="row[propname]" :min="1" type="number" @change="handlerInput({key:'price',val:row[propname],index:index})"></el-input>
                      </div>
                      <div v-if="propname === 'discount_id'">
                        <div class="flex items-center">
                           <el-select v-model="row[propname]" clearable @change="handlerSelect({key:'discount_id',val:row[propname],index:index})">
                              <el-option
                                v-for="item in discountList"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id"
                              />
                            </el-select>
                            <div class="flex items-center">{{row[propname] != 0 ?row[propname]*10 + '%' : ''}}</div>
                        </div>
                      </div>
                      <div v-if="propname === 'discount_price'">
                        <el-input v-model="row[propname]" :min="1" type="number" @change="handlerInput({key:'discount',val:row[propname],index:index})"></el-input>
                      </div>
                       <div v-if="propname === 'total_prices'">
                            <div>{{row[propname]}}</div>
                       </div>
                    </template>
                    <template #search_operate>
                        <el-table-column   min-width="200px" label="操作" >
                          <template #default="scope">
                              <el-popconfirm
                                  confirm-button-text="確認"
                                  cancel-button-text="NO"
                                  title="確認刪除該數據?"
                                   @confirm="confirmEvent"
                                >
                                  <template #reference>
                                <el-button type="danger" icon="Delete" @click="deleteProduct(scope.$index, scope.row)" circle  ></el-button >
                                </template>
                              </el-popconfirm>
                          </template>
                        </el-table-column>
                  </template>
              </ProTable>
</div>
</template>

<script setup>
import { ref,watch } from 'vue' 
import {elProps,controlWidth} from './index'

// 數量，金額，單價
const handlerInput = (data)=>{
  console.log(data);
        emit('input', data)
}
// 折扣
const handlerSelect= (data)=>{
          if (Boolean(data.val)) {
          discountList.value.forEach((item, index) => {
            if (item.id === data.val) {
              data.item = item
            }
          })
        } else {
          data.item = null
        }
 emit('select',data)
}

const rowProduct = ref({})
const deleteProduct = (index,row)=>{
  console.log(row);
      rowProduct.value = row
}
const emit = defineEmits(['del_course','select','input'])
const confirmEvent = () => {
   emit('del_course',rowProduct.value)
}

const column = {
        name:'產品名稱',
        pay_money:'支付金額',
        num:'數量',
        price:'單價',
        discount_id:'特別折扣',
        discount_price:'折扣價',
        total_prices:'金額'
}

const props = defineProps({
    discountSelect:Object,
    list:Object
})
const tableData = ref([])
tableData.value = props.list
watch(()=>props.list,(newval)=>{
tableData.value = newval
})
const discountList = ref([])
discountList.value = props.discountSelect
watch(()=>props.discountSelect,(newval)=>{
discountList.value = newval
})
</script>

<style lang='less'  scoped>

</style>